<template>
	<view v-if="dataInfo">
		<view
			class="wrap-top flex align-center just-center f-30"
			v-if="!isMine && dataInfo.is_bonus == 1 && dataInfo.ReceiveEnd == 0"
			:class="dataInfo.isReceive == 1 ? 'wrap-top-receive' : 'wrap-top-normal'"
		>
			<text>{{ getTopShowText() }}</text>
		</view>

		<view class="wrap paddingBottom flex column">
			<publisherVue :dataInfo="dataInfo" />

			<contentInfoVue :dataInfo="dataInfo" />

			<bannerVue
				:dataInfo="dataInfo"
				v-if="dataInfo.article_type == 1 || (dataInfo.article_type == 0 && dataInfo.images.length > 0)"
			/>

			<contactInfoVue 
				v-if="dataInfo.type == 2 && dataInfo.link_name !== null && dataInfo.link_mobile !== null && dataInfo.link_name !== '' && dataInfo.link_mobile !== ''" 
				:dataInfo="dataInfo" 
			/>

			<recommendVue :dataInfo="dataInfo" v-if="dataInfo.spread_type !== null" />

			<commentListVue
				ref="commentList"
				:commentNum="dataInfo.comment_num"
				:articleID="articleID"
				@onReply="onReply"
			/>
			
			<recommedStoreListVue :list="recommendStoreList" />
		</view>

		<view class="wrap-footer safe-area">
			<view class="flex align-center just-between">
				<view class="comment-bg flex align-center" @click.stop="onComment">
					<image :src="$staticImagePath('article/detail_write.png')" />

					<input class="input f-26" placeholder="说点什么..." placeholder-class="place" disabled />
				</view>

				<view class="ft-right flex align-center">
					<view class="flex align-center">
						<image :src="$staticImagePath('article/detail_evaluate.png')" />

						<view class="f-28">{{ dataInfo.comment_num }}</view>
					</view>

					<view class="flex align-center" @click.stop="onLikeArticle">
						<image v-if="dataInfo.is_like == 1" :src="$staticImagePath('article/detail_zan_select.png')" />
						<image v-else :src="$staticImagePath('article/detail_zan.png')" />

						<view class="f-28">{{ dataInfo.like_num }}</view>
					</view>
				</view>
			</view>
		</view>

		<commentPopupVue :articleID="articleID" :isShow.sync="isPopupComment" :commentInfo="commentInfo" />

		<receiveTimerInfoVue
			ref="receiveTimerInfo"
			:redType="dataInfo.bonus.type"
			v-if="!isMine && dataInfo.is_bonus == 1 && dataInfo.isReceive == 0 && dataInfo.ReceiveEnd == 0"
			@onTimerEnd="onTimerEnd"
		/>

		<openRedBagVue :articleID="articleID" :isShow.sync="isShowOpenRedBag" @onReceiveSuccess="onReceiveSuccess" />
	</view>
</template>

<script>
	import { GetArticleDetail, LikeArticle, GetArticleShop } from "@/API/article.js";
	import publisherVue from "@/components/article/publisher.vue";
	import bannerVue from "@/components/article/banner.vue";
	import contentInfoVue from "@/components/article/contentInfo.vue";
	import recommendVue from "@/components/article/recommend.vue";
	import contactInfoVue from "@/components/article/contactInfo.vue";
	import commentListVue from "@/components/article/commentList.vue";
	import commentPopupVue from "@/components/article/commentPopup.vue";
	import openRedBagVue from "@/components/article/openRedBag.vue";
	import receiveTimerInfoVue from "@/components/article/receiveTimerInfo.vue";
	import recommedStoreListVue from "@/components/article/recommedStoreList.vue";

	export default {
		components: {
			publisherVue,
			bannerVue,
			contentInfoVue,
			recommendVue,
			commentListVue,
			contactInfoVue,
			commentPopupVue,
			openRedBagVue,
			receiveTimerInfoVue,
			recommedStoreListVue
		},
		data() {
			return {
				isMine: false, //来自哪里
				articleID: "", //文章ID
				super_id: "", //分享者的Id

				dataInfo: null, //文章详情数据

				isPopupComment: false, //是否弹起评论
				commentInfo: {
					place: "", //评论提示
					pid: "", //上级ID
					toID: "", //
				},

				isShowOpenRedBag: false, //是否展示红包
				
				recommendStoreList: [], //推荐的店铺列表
			};
		},
		onLoad(options) {
			this.articleID = options.id;
			if (options.isMine) {
				this.isMine = true;
			}
			if (options.from && options.super_id) {
				this.super_id = options.super_id;
			}
			this.getData();
		},
		onPullDownRefresh() {
			this.$nextTick(() => {
				this.$refs.commentList.onRefresh();
			});
		},
		onReachBottom() {
			this.$nextTick(() => {
				this.$refs.commentList.onLoadMore();
			});
		},
		// 页面销毁
		onUnload() {
			if (this.dataInfo !== null && this.dataInfo.is_bonus == 1 && this.dataInfo.isReceive == 0) {
				this.$nextTick(() => {
					this.$refs.receiveTimerInfo.onStopTimer();
				});
			}
		},
		/**
		 * 分享好友
		 */
		onShareAppMessage() {
			const obj = this.$filters.getShareInfo(this.dataInfo);
			return {
				title: obj.title,
				imageUrl: obj.shareImg,
				path: `/pages/home/article/details?id=${this.articleID}&from=share&super_id=${
					this.$stoarge.getUserInfo().id
				}`,
			};
		},
		/**
		 * 分享朋友圈
		 */
		onShareTimeline() {
			const obj = this.$filters.getShareInfo(this.dataInfo);
			return {
				title: obj.title,
				imageUrl: obj.shareImg,
				query: `id=${this.articleID}&from=share&super_id=${this.$stoarge.getUserInfo().id}`,
			};
		},

		methods: {
			/**
			 * 登录成功刷新接口
			 */
			onLoginRefreshData() {
				this.getData();
				this.$nextTick(() => {
					this.$refs.commentList.onRefresh();
				});
			},
			/**
			 * 结束倒计时
			 */
			onTimerEnd() {
				this.isShowOpenRedBag = true;
			},
			/**
			 * 领取成功
			 */
			onReceiveSuccess() {
				this.dataInfo.isReceive = 1;
			},
			/**
			 * 获取顶部显示的文字
			 */
			getTopShowText() {
				var text = "";

				if (this.dataInfo.isReceive == 1) {
					if (this.dataInfo.bonus.type == 0) {
						text = "您已经成功领取该红包！~";
					} else if (this.dataInfo.bonus.type == 1) {
						text = "您已经成功领取优惠券！~";
					}
				} else {
					if (this.dataInfo.article_type == 0) {
						//图文
						if (this.dataInfo.bonus.type == 0) {
							text = "观看得红包！~";
						} else if (this.dataInfo.bonus.type == 1) {
							text = "观看得优惠券！~";
						}
					} else if (this.dataInfo.article_type == 1) {
						//视频
						if (this.dataInfo.bonus.type == 0) {
							text = "看视频得现金红包！~";
						} else if (this.dataInfo.bonus.type == 1) {
							text = "看视频得优惠券！~";
						}
					}
				}
				return text;
			},
			/**
			 * 点赞
			 */
			onLikeArticle() {
				LikeArticle(this.articleID).then((res) => {
					this.$st.success(res.msg, () => {
						this.getData();
					});
				});
			},
			/**
			 * 评论
			 */
			onComment() {
				this.commentInfo = {
					place: "说点什么...",
					pid: "0",
					toID: "0",
				};
				this.isPopupComment = true;
			},
			/**
			 * 回复
			 */
			onReply(obj) {
				this.commentInfo = {
					place: `回复${obj.name}`,
					pid: obj.pid,
					toID: obj.toID,
				};
				this.isPopupComment = true;
			},
			/**
			 * 网络请求
			 */
			getData() {
				this.getDetailsData();
				this.getRecommendStoreData();
			},
			/**
			 * 获取店铺详情
			 */
			getDetailsData() {
				GetArticleDetail(this.articleID).then((res) => {
					this.dataInfo = res.data;
				
					var title = "";
					if (res.data.article_type == 0) {
						title = "图文详情";
					} else if (res.data.article_type == 1) {
						title = "视频详情";
					}
					uni.setNavigationBarTitle({
						title: title,
					});
				});
			},
			/**
			 * 获取店铺推荐的
			 */
			getRecommendStoreData() {
				GetArticleShop(this.articleID).then(res => {
					this.recommendStoreList = res.data;
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-top {
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		height: 70rpx;
		z-index: 99;
	}
	.wrap-top-normal {
		background: linear-gradient(to right, #dd0a2c, #f3a26a);
		color: #ffffff;
	}
	.wrap-top-receive {
		background: linear-gradient(to right, #f7c388, #fce0ba);
		color: #865b2a;
	}

	.wrap {
		padding: 20rpx 25rpx;
		--bottom-height: 120rpx;
		gap: 20rpx;
		background-color: white;
		min-height: 100vh;
	}

	.wrap-footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: white;
		border-top: 2rpx solid #cccccc;
		z-index: 99;
		overflow: hidden;

		> view {
			width: 100%;
			height: 100rpx;
			overflow: hidden;
			padding: 0rpx 25rpx;
			box-sizing: border-box;
			gap: 50rpx;

			.comment-bg {
				flex: 1;
				height: 68rpx;
				border-radius: 34rpx;
				overflow: hidden;
				background-color: #f6f6f6;
				gap: 15rpx;
				padding: 0 25rpx;
				box-sizing: border-box;

				> image {
					width: 26rpx;
					height: 26rpx;
				}

				.input {
					flex: 1;
					color: #333333;
				}

				/deep/ .place {
					color: #666666;
				}
			}

			.ft-right {
				overflow: hidden;
				gap: 35rpx;

				> view {
					gap: 12rpx;
					overflow: hidden;
					color: #121212;

					> image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>
